<template>
	<div class="data-table-container layout-padding">
		<el-card class="layout-padding-auto" shadow="hover">
			<el-form ref="queryFormRef" :model="state.tableData.param.dataObj" inline>
				<el-form-item class="!mr-4" prop="loginName">
					<el-input size="default" v-model="state.tableData.param.dataObj.loginName" clearable placeholder="请输入账户名称"
						class="max-w-180px">
					</el-input>
				</el-form-item>
				<el-form-item class="!mr-4" prop="userName">
					<el-input size="default" v-model="state.tableData.param.dataObj.userName" clearable placeholder="请输入用户昵称"
						class="max-w-180px">
					</el-input>
				</el-form-item>
				<el-form-item class="!mr-4" prop="phone">
					<el-input size="default" v-model="state.tableData.param.dataObj.phone" clearable placeholder="请输入电话号码"
						class="max-w-180px">
					</el-input>
				</el-form-item>
				<el-form-item class="!mr-4" v-auth="'user.list'">
					<el-button size="default" type="primary" @click="getTableData">
						<el-icon>
							<ele-Search />
						</el-icon>
						查询
					</el-button>
				</el-form-item>
				<el-form-item class="!mr-4" v-auth="'user.add'">
					<el-button size="default" type="success" @click="onOpenAddUser('add')">
						<el-icon>
							<ele-FolderAdd />
						</el-icon>
						新增
					</el-button>
				</el-form-item>
				<el-form-item class="!mr-4" v-auth="'user.list'">
					<el-button size="default" type="primary" @click="onHandleResetFields">
						<el-icon>
							<ele-Refresh />
						</el-icon>
						重置
					</el-button>
				</el-form-item>
			</el-form>
			<el-table v-loading="state.tableData.loading" :data="state.tableData.data" style="width: 100%">
				<el-table-column label="序号" type="index" width="60" />
				<el-table-column label="ID" prop="id" show-overflow-tooltip=""></el-table-column>
				<el-table-column label="账户名称" prop="loginName" show-overflow-tooltip=""></el-table-column>
				<el-table-column label="用户昵称" prop="userName" show-overflow-tooltip=""></el-table-column>
				<el-table-column label="性别" prop="sex" show-overflow-tooltip=""></el-table-column>
				<el-table-column label="手机号" prop="phone" show-overflow-tooltip=""></el-table-column>
				<el-table-column label="邮箱" prop="email" show-overflow-tooltip=""></el-table-column>
				<el-table-column label="用户状态" prop="active" show-overflow-tooltip="">
					<template #default="scope">
						<el-tag v-if="scope.row.active" type="success">启用</el-tag>
						<el-tag v-else type="info">禁用</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="用户描述" prop="remarks" show-overflow-tooltip=""></el-table-column>
				<el-table-column label="创建时间" prop="createTime" show-overflow-tooltip=""></el-table-column>
				<el-table-column label="过期时间" prop="expirationDate" show-overflow-tooltip=""></el-table-column>
				<el-table-column label="最近登录" prop="lastLoginTime" show-overflow-tooltip=""></el-table-column>
				<el-table-column label="操作" width="250">
					<template #default="scope">
						<el-button :disabled="scope.row.loginName === 'admin'" size="small" text type="primary"
							@click="onOpenEditUser('edit', scope.row)" v-auth="'user.edit'">
							修改
						</el-button>
						<el-button :disabled="scope.row.loginName === 'admin'" size="small" text type="success"
							@click="onOpenEditUser('role', scope.row)" v-auth="'user.assign'">
							分配角色
						</el-button>
						<el-button :disabled="scope.row.loginName === 'admin'" size="small" text type="warning"
							@click="onResetPassword(scope.row)" v-auth="'user.reset'">重置密码
						</el-button>
						<el-button :disabled="scope.row.loginName === 'admin'" size="small" text type="danger"
							@click="onRowDel(scope.row)" v-auth="'user.del'">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination v-model:current-page="state.tableData.param.pageNum"
				v-model:page-size="state.tableData.param.pageSize" :page-sizes="[10, 20, 30]" :pager-count="5"
				:total="state.tableData.total" background class="mt15" layout="total, sizes, prev, pager, next, jumper"
				@size-change="onHandleSizeChange" @current-change="onHandleCurrentChange">
			</el-pagination>
		</el-card>
		<UserDialog ref="userDialogRef" @refresh="getTableData()" />
	</div>
</template>

<script lang="ts" name="systemUser" setup>
import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { userApi } from '/@/api/sys/user';

// 引入组件
const UserDialog = defineAsyncComponent(() => import('/@/views/system/user/dialog.vue'));

// 定义变量内容
const userDialogRef = ref();
const queryFormRef = ref();
const state = reactive<SysUserState>({
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			pageNum: 1,
			pageSize: 10,
			dataObj: {
				loginName: '',
				userName: '',
				phone: '',
			},
		},
	},
});

// 初始化表格数据
const getTableData = () => {
	state.tableData.loading = true;
	userApi()
		.getTableData(state.tableData.param)
		.then((res) => {
			state.tableData.data = res.data.records;
			state.tableData.total = res.data.total;
			state.tableData.loading = false;
		})
		.catch(() => {
			state.tableData.loading = false;
		});
};
// 打开新增用户弹窗
const onOpenAddUser = (type: string) => {
	userDialogRef.value.openDialog(type);
};
// 打开修改用户弹窗
const onOpenEditUser = (type: string, row: RowUserType) => {
	userDialogRef.value.openDialog(type, row);
};
// 删除用户
const onRowDel = (row: RowUserType) => {
	ElMessageBox.confirm(`此操作将永久删除账户“${row.userName}”，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(() => {
			userApi()
				.delRecord(row)
				.then(() => {
					getTableData();
					ElMessage.success('删除成功');
				});
		})
		.catch(() => {
			ElMessage.info('已取消删除');
		});
};
// 分页改变
const onHandleSizeChange = (val: number) => {
	state.tableData.param.pageSize = val;
	getTableData();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
	state.tableData.param.pageNum = val;
	getTableData();
};
// 页面加载时
onMounted(() => {
	getTableData();
});
// 重置查询表单
const onHandleResetFields = () => {
	queryFormRef.value.resetFields();
	getTableData();
};
// 重置密码
const onResetPassword = (row: RowUserType) => {
	ElMessageBox.confirm(`是否确定重置账户“${row.userName}”的密码?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(() => {
			userApi()
				.resetPassword(row)
				.then((res) => {
					getTableData();
					ElMessage.success(res.msg || '密码重置成功');
				});
		})
		.catch(() => { });
};
</script>